$font: (
  22: 44,
  18: 36,
  16: 32,
  14: 28,
  12: 24,
  10: 20,
);
@each $font-size-name, $font-size in $font {
  .font-size-#{$font-size-name} {
    font-size: #{$font-size}rpx;
  }
}

$marginList: (
  40: 80,
  36: 72,
  32: 64,
  30: 60,
  26:52,
  20:  40,
  19: 38,
  18: 36,
  17: 34,
  16: 32,
  15: 30,
  14: 28,
  13: 26,
  12: 24,
  10: 20,
  9: 18,
  8: 16,
  7: 14,
  6: 12,
  5: 10,
  4: 8,
  3: 6,
  2: 4,
  1: 2,
  0: 0,
);

@each $margin-name, $margin in $marginList {
  .margin-#{$margin-name} {
    margin: #{$margin}rpx;
  }
}

@each $margin-name, $margin in $marginList {
  .margin-#{$margin-name}-0 {
    margin: #{$margin}rpx 0;
  }
}

@each $margin-name, $margin in $marginList {
  .margin-0-#{$margin-name} {
    margin: 0 #{$margin}rpx;
  }
}

@each $margin-name, $margin in $marginList {
  .mt-#{$margin-name} {
    margin-top: #{$margin}rpx;
  }
}

@each $margin-name, $margin in $marginList {
  .mb-#{$margin-name} {
    margin-bottom: #{$margin}rpx;
  }
}

@each $margin-name, $margin in $marginList {
  .ml-#{$margin-name} {
    margin-left: #{$margin}rpx;
  }
}

@each $margin-name, $margin in $marginList {
  .mr-#{$margin-name} {
    margin-right: #{$margin}rpx;
  }
}



@each $padding-name, $padding in $marginList {
  .padding-#{$padding-name} {
    padding: #{$padding}rpx;
  }
}
@each $padding-name, $padding in $marginList {
  .padding-0-#{$padding-name} {
    padding: 0 #{$padding}rpx;
  }
}
@each $padding-name, $padding in $marginList {
  .padding-#{$padding-name}-0 {
    padding: #{$padding}rpx 0;
  }
}
@each $padding-name, $padding in $marginList {
  .pt-#{$padding-name} {
    padding-top: #{$padding}rpx;
  }
}

@each $padding-name, $padding in $marginList {
  .pb-#{$padding-name} {
    padding-bottom: #{$padding}rpx;
  }
}

@each $padding-name, $padding in $marginList {
  .pl-#{$padding-name} {
    padding-left: #{$padding}rpx;
  }
}

@each $padding-name, $padding in $marginList {
  .pr-#{$padding-name} {
    padding-right: #{$padding}rpx;
  }
}

@each $padding-name, $padding in $marginList {
  .pb-#{$padding-name} {
    padding-bottom: #{$padding}rpx;
  }
}

@each $padding-name, $padding in $marginList {
  .pl-#{$padding-name} {
    padding-left: #{$padding}rpx;
  }
}

@each $padding-name, $padding in $marginList {
  .pr-#{$padding-name} {
    padding-right: #{$padding}rpx;
  }
}

$radiusList: (
  10: 20,
  8: 16,
  6: 12,
  4: 8,
  2: 4,
  0: 0,
);

@each $radius-name, $radius in $radiusList {
  .border-radius-#{$radius-name} {
    border-radius: #{$radius}rpx;
  }
  .border-radius-top-#{$radius-name} {
    border-top-left-radius: #{$radius}rpx;
    border-top-right-radius: #{$radius}rpx;
  }
  .border-radius-bottom-#{$radius-name} {
    border-bottom-left-radius: #{$radius}rpx;
    border-bottom-right-radius: #{$radius}rpx;
  }
}

// 黑
$color-list: (
  theme: #f0780e,
  red: #f5222d,
  orange: #ff6026,
  white: white,
  gary: #888888,
  blue: #3072f6,
  green: #52c41a,
  black: rgba(0, 0, 0, 0.85),
  black2: #222a31,
  black-key: #232a32,
  bgf6: #f6f8fa,
  bgf8: #f8f8f8,
  c30: #306ef0,
  c24: #242d4a,
  c4d: #4d546b,
  c91: #9195a4,
  ced: #F0780E,
  c1f: #1f2637,
  c00: #000000,
  c98: #989cac,
  cff: #ffffff,
  c18: #181c27,
  c86: #865625,
  c87: #87531f,
  c99: #996633,
  c8d: #8d5c0e,
  cf2: #f2f2f2,
  ca6: #a6011a,
  cb0: #b02821,
  ceb: #eb3c43,
  cea: #ea1032,
  cd7: #d74219,
  cef: #efefef,
  cf0: #f0f5ff,
  cf5: #f5f5f5,
  c33: #333333,
);

@each $color-name, $color-value in $color-list {
  .c-#{"" + $color-name} {
    color: #{$color-value};
  }
}

@each $color-name, $color-value in $color-list {
  .bg-#{"" + $color-name} {
    background: #{$color-value};
  }
}

.border-margin {
  margin: 20rpx;
  border-radius: 20rpx;
}

.flex {
  display: flex;
  &-center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
  }
  &-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  &-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    word-break: break-all;
  }

  &-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    word-break: break-all;
  }

  &-base {
    align-items: baseline;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-shrink {
    flex-shrink: 0;
    word-break: break-all;
  }

  &-grow {
    flex-grow: 1;
    word-break: break-all;
  }

  &-column {
    flex-direction: column;
  }
}

.ellipsis {
  overflow: hidden; /*超出的部分隐藏起来。*/
  white-space: nowrap; /*不显示的地方用省略号...代替*/
  text-overflow: ellipsis; /* 支持 IE */
}

.bot-tac {
  width: 100%;
  height: 104rpx;
  @extend .flex-center;
  @extend .font-size-12;
  color: #888888;
}

.ellipsis1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.iosAn {
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}

.fw {
  font-weight: bold;
}

.fw-normal {
  font-weight: normal;
}
.ms {
  &-1 {
    @extend .c-c24;
    @extend .font-size-18;
    @extend .mb-14;
    @extend .flex-center;
    padding: 50rpx 46rpx 0rpx 50rpx;
  }
  &-2 {
    @extend .c-c4d;
    max-height: 560rpx;
    overflow-y: scroll;
    line-height: 40rpx;
    padding: 0rpx 46rpx 0rpx 50rpx;
    &-2 {
      @extend .mb-14;
      white-space: pre-wrap;
    }
  }
  &-3 {
    border-top: 1rpx solid #e5e5e5;
    height: 100rpx;
    @extend .c-theme;
    @extend .font-size-18;
    @extend .flex-center;
    font-weight: bold;
  }
}
